Fox 3.0 Router 视图-局部更新

局部更新（推荐）

无可否认，最适合fox router还是局部更新。首先fox-router-view需要设置name（保证唯一性），通过rouer的to/open/append等方法中的root参数，指定page加载到指定的fox-router-view下面。

例子

例子代码：sites/example/pages/program-navigate-part 例子说明：在index.js中进行路由注册，而index.vue是页面上最上层路由，没设置name，默认为name=default，在panel.vue中定义fox-router-view的name=_sub_root_view，通过在router.to方法中设置root，从而让页面精确得更新指定位置

API

push方法的参数类型有两种:(route)|(path, data, root)

参数A（route路由对象）

fox.router.push(route)

属性	类型	说明
path	string	路由路径
name	string	路由名称
root	string	装载组件的router-view的名称
params	Object	路由参数
success	Function	页面装载成功后调用方法
error	Function	页面装载失败后调用方法
destroy	Function	页面销毁时调用方法

参数B(参数列表):

fox.router.push(path/name, data, root)

属性	类型	说明
path	string	路由路径
name	string	路由名称
data	Object	路由参数
root	string	装载组件的router-view的名称

index.ts(路由注册)

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:38:12
 */

import panel from './components/panel.vue'
import home from './components/home.vue'
import about from './components/about.vue'

import notFound from '../not-found/index.vue'


//路由表
let routes = [
    {
        path:'/',
        redirect:'/panel/home'
    },
    {
        path:'/panel',
        component:panel,
    },
    {
        path:'/home',
        component:home,
    },
    {
        path:'/about',
        component:about,
    },
]
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //设置404页面
        fox.router.setNotFoundRoute( {
            path:'/notFound',
            component: notFound,
        },)
        //加入路由
        fox.router.addRoutes(routes)
    }

} 

index.vue(top路由演示)

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:22:17
-->
<template>
    <div>
        <button class="my-button" @click="toPanel">go panel</button>
    </div>
    <div class="my-router-view-div">
        <fox-router-view></fox-router-view>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFox } from '../../assets/libs/fox-v3.0.0/index'
// import { useFox } from '../../core/index'
import { FoxApp } from './index'

export default defineComponent({
    setup() {
        //获取 fox
        let fox = useFox()!
        //安装fox app
        FoxApp.install(fox)

        let router = fox.router
        let toPanel = ()=>{
             router.push('/panel')
        }
    
        return {
            toPanel
        }
    },
})
</script>

<style>
    .fox-card-views{
        padding: 0px 0x 0px 0px;
    }

    .fox-card-view{
        position: relative;
        overflow: hidden;
    }

    .fox-card-view-trans-enter {}

    .fox-card-view-trans-enter-active {
       animation: fox-card-view-in-slide-right 330ms;
        -webkit-animation: fox-card-view-in-slide-right 330ms;
        z-index: 120;
    }

    .fox-card-view-trans-enter-to {}

    /* 进场动画 */
    @-webkit-keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }
    @keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }
</style>

panel.vue(子路由演示)

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-06-06 17:59:28
-->
<template>
    <div>主面版</div>
    <div>
        <button class="my-button" @click="toHome">go home</button>
        <button class="my-button" @click="toAbout">go about</button>
    </div>
    <div>
        <input type="text">
    </div>
     <div>
         <fox-router-view name="_sub_root_view"  :multi=false></fox-router-view>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue'
import { useFox } from '../../../assets/libs/fox-v3.0.0/index'

export default defineComponent({
    setup() {
        onMounted(()=>{
            console.info(`>>>>> on mounted(panel)`)
        })
        onUnmounted(()=>{
            console.info(`----- on unmounted(panel)`)
        })

        //获取 fox
        let fox = useFox()!
        //获取 router
        let router = fox.router
        let toHome = ()=>{
            //参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
             router.push('/home', {'target':'home'}, '_sub_root_view')
        }
        let toAbout = ()=>{
             //参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            router.push('/about', {'target':'about'}, '_sub_root_view')
        }
        return {
            toHome,
            toAbout
        }
    },
})
</script>